<template>
	<div>
		<el-container>
			<el-header>
				<span style="float: left;">用户：{{ user_name }}</span>
				<span @click="toCollect()">收藏</span>
				<span style="float: right;" @click="layout()">退出</span>
			</el-header>
			<!-- 轮播图 -->
			<el-main>
				<div class="box">
					<el-input type="text" placeholder="请搜索视频" v-model="query" clearable>
						<el-button slot="append" icon="el-icon-search" @click="tovideo_title()">搜索</el-button>
					</el-input>

					<el-menu class="menu">
						<el-menu-item index="1" @click="tovideo('生活兴趣')">
							<span slot="title">生活兴趣</span>
						</el-menu-item>
						<el-menu-item index="2" @click="tovideo('计算机')">
							<span slot="title">计算机</span>
						</el-menu-item>
						<el-menu-item index="3" @click="tovideo('外语')">
							<span slot="title">外语</span>
						</el-menu-item>
						<el-menu-item index="4" @click="tovideo('考研')">
							<span slot="title">考研</span>
						</el-menu-item>
					</el-menu>

					<el-carousel class="carousel">
						<el-carousel-item v-for="item in carousellist" :key="item.id">
							<!-- <h3 class="small">{{ item }}</h3> -->
							<el-image @click="toplay(item.video_url)" style="width: 500px; height: 200px" :src="baseUrl+item.image_url" ></el-image>
						</el-carousel-item>
					</el-carousel>

				</div>
			</el-main>
			<hr>
			<!-- 视频列表 -->
			<el-main>
				<div class="box">
					<router-view></router-view>
				</div>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: "http://127.0.0.1/thinkphp/public/uploads/",
				query: "",
				carousellist: [],
				user_name: window.sessionStorage.getItem("user_name"),

			}
		},
		created() {
			this.getCarousel();
		},
		methods: {
			getCarousel() {
				let url = "carouselList/"
				this.$http.get(url).then(res => {
					// console.log(res.data);
					this.carousellist = res.data;
				})
			},
			tovideo(category) {
				this.$router.push({
					path: "/user/video",
					name: "videolist",
					query: {
						"video_category": category,
					}
				});
			},
			toplay(url) {
				this.$router.push({
					path: "/user/play",
					name: "userplay",
					params: {
						"video_url": url,
					}
				});
			},
			tovideo_title() {
				this.$router.push({
					path: "/user/video",
					name: "videolist",
					query: {
						"video_title": this.query,
					}
				});
			},
			layout() {
				let url = "layout/"+window.sessionStorage.getItem("token");
				this.$http.get(url).then(res => {
					if(res.data.status == 2000){
						window.sessionStorage.clear();
						this.$router.push("/");
					}
				})
			},
			toCollect() {
				this.$router.push("/user/collect");
			}
		}
	}
</script>

<style scoped="scoped">
	.el-header {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		/* line-height: 160px; */
	}

	body>.el-container {
		margin-bottom: 40px;
	}

	.box {
		margin: 0 auto;
		width: 900px;
	}

	.menu {
		width: 250px;
		background-color: #E9EEF3;
	}
	.carousel {
		width: 500px;
		height: 200px;
		position: absolute;
		top: 140px;
		right: 300px;
	}
</style>
